<template>
    <div style="text-align:center;">
        <Row style="margin-bottom:10px">
             <Col span="14">
                <label>服务名称：</label>
                <Input v-model="page.action_data.name" style="width:200px"></Input>
                <Button type="primary" icon="ios-search" @click="search" >搜索</Button>
                <Button type="primary"  @click="allInfo" >全部信息</Button>
            </Col>
        </Row>
            <Table highlight-row ref="table" border stripe :columns="columns1" :data="page.list" @on-current-change="currentSelect"></Table>
            <!-- <div style="float:left;width:50%;height:521px;margin-left:20px">
               <Card>
                    <p slot="title"><span >服务推荐</span></p>
                    <Recommend></Recommend>
                </Card>
            </div> -->
        <div style="margin:10px 0px;">
             <AutoPage v-model="page"></AutoPage>
        </div>
       
        <div style="background-color:#fff;height:250px;">
            <Row style="font-size:20px">匹配详情信息</Row>
            <Row v-if="current">
                <Col span="12">
                    <Card style="height:200px">
                        <p slot="title">【服务信息详情】<a :href="src+current.matchid" :title="current.match_title" target="_blank">{{current.match_title}}</a></p>
                        <p style="position:absolute;left:5px;">服务简介：{{current.match_content}}</p>
                    </Card>
                </Col>
                <Col span="12">
                    <Card style="height:200px">
                        <p slot="title">【需求信息详情】<a :href="demand_src+current.id" :title="current.title" target="_blank">{{current.title}}</a></p>
                        <p><span style="position:absolute;left:5px;">需求简介：</span>{{current.content}}</p>
                    </Card>
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
import Page from '@/common/model/Page'
import AutoPage from '@/common/components/AutoPage'

export default {
    data(){
        return {
            page: new Page("service/title_recommend",{name: ''}),
            current: null,
            src: '/#/index/service_detail/',
            demand_src: '/#/index/demand_detail/',
            columns1:[
                {
                    title:'序号',
                    type:'index',
                    width: 100,
                    align:'center',
                },
                {
                    title: '服务名称',
                    key: 'match_title',
                    render: (h,params)=>{
                        return h('span',{
                            props:{
                                style:"font-weight:700"
                            }},
                                '【服务机构】'+params.row.match_title
                        )
                    }
                },
                {
                    title: '需求名称', 
                    key: 'title',
                    render: (h,params)=>{
                        return h('span',{
                            props:{
                                style:"font-weight:700"
                            }},
                                '【企业】'+ params.row.title
                        )
                    }
                },
                 {
                    title: '需求发布日期',
                    key: 'datetime',
                    render: (h,params)=>{
                        return h('span', new Date(parseInt(params.row.datetime)).toLocaleDateString())
                    }
                },
                {
                    title: '相似度',
                    key: 'rate',
                    width: 100,
                    render: (h,params)=>{
                        return h('span', params.row.rate.toFixed(2))
                    }
                }
            ]
        };
    },
    components: {
        AutoPage
    },
    methods: {
        allInfo(){
            this.page.action_data.name = "";
            this.page.current_page = 1;
            this.page.getData();        
        },
        search(){
            this.page.current_page = 1;
            this.page.getData();       
        },
        currentSelect(currentRow,oldCurrentRow){
            this.current = currentRow;
        },
    },
}
</script>